<template>
	<view class="content">
		<z-paging ref="paging" :auto-hide-loading-after-first-loaded="false" empty-view-img="/static/nodata1.png" :empty-view-img-style="{width:'410rpx',height:'278rpx',marginBottom:'30rpx'}" v-model="dataList" @query="getList"  @onRefresh="onRefresh">
			<view slot="top">
				<view class="bgf flex-bt" v-show="userInfo">
					<view class="flex address" style="width: 180rpx;" @tap="show = true">
						<view class="p line1" style="max-width: 200rpx;margin-right: 10rpx;">
							{{cateValue || '选择分类'}}
						</view>  
						<u-icon name="arrow-down-fill" color="#333" size="22"></u-icon>
					</view> 
					<view class="flex-bt"  style="margin-left: 10rpx;flex: 1;">
						<view class="search-box flex-bt" style="flex: 1;width: auto;">
							<view class="flex">
								<image src="@/static/Search.png" mode="widthFix" class="icon"></image>
								<input type="text" class="input" confirm-type="search" v-model="keyWord" @confirm="confirm" :placeholder="'请输入商品名称搜索'" placeholder-style="color: #A9A9A9">
							</view>
						</view>
						<view class="flex-ct bg-red m-btn" @tap="confirm">
							搜索
						</view>
					</view>
				</view>
				<u-tabs :is-scroll="false" :list="nav" gutter="30" active-color="#ff6a6c" font-size="28" inactive-color="#A2A4AC" :current="typeCurrent" @change="tabChange"></u-tabs>
				
			</view>
			 
			<block v-if="userInfo">
				<view class="list">
					<view class="wrap" v-for="(item,index) in dataList" :key="index">
						<view class="flex">
							<image :src="item.goods_image" mode="aspectFill" class="img"></image>
							<view class="font">
								<view class="tit line2">{{item.goods_name}}</view>
								<view class="p">
									售价：<text class="red">¥{{item.goods_price}}</text>
								</view>
								<view class="p">
									<block  v-if="item.goods_info">
										<text>库存：{{item.goods_info.goods_storage}}</text>
										<text>销量：{{item.goods_salenum}}</text>
									</block>
									<block v-else-if="item.seller_goods_storage">
										<text>库存：{{item.seller_goods_storage.seller_goods_storage}}</text>
										<text>销量：{{item.seller_goods_storage.seller_goods_salenum}}</text>
									</block>
								</view>
							</view>
						</view>
						<view class="bot flex-bt" v-if="typeCurrent != 3">
							<view class="flex" @tap="toUrl(`shoper?goods_storage=${item.goods_info.goods_storage}&goods_id=${item.goods_info.goods_id}`)">
								<u-icon name="zhuanfa" color="#333" size="28"></u-icon>
								<text>库存分配</text>
							</view>
							<view class="flex" @tap="toUrl(`details?goods_id=${item.goods_info.goods_id}`)">
								<u-icon name="edit-pen" color="#333" size="28"></u-icon>
								<text>查看</text>
							</view>
							<!-- <view class="flex">
								<u-icon name="download" color="#333" size="28"></u-icon>
								<text>下架</text>
							</view>
							<view class="flex">
								<u-icon name="trash" color="#333" size="28"></u-icon>
								<text>删除</text>
							</view> -->
						</view>
					</view>
				</view>
				<!-- <view class="com-bot-box">
					<view class="container flex-ct">
						<view class="bg-red com-btn flex-ct" @tap="toUrl(`details`)" style="flex: 1;">
							新增商品
						</view>
					</view>
				</view>
				
				<view class="com-hei"></view> -->
			</block>
			<view class="nodata" v-else>
				<image src="/static/nodata2.png" mode="widthFix" class="img"></image>
				<view class="font"> 
					<view> 
						您还未登录,
					</view>
					<view>
						请先登录后进行操作~
					</view>
				</view>
				<view class="com-btn bg-blue flex-ct" style="width: 300rpx;margin: 40rpx auto;" @tap="toUrl('/pages/login/login')">
					去登录
				</view>
			</view>
		</z-paging>
		<u-select v-model="show" :list="cateList" label-name="gc_name" value-name="gc_id" @confirm="selectValue"></u-select>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import {goods_list,goods_category,inventory,storage,seller_list} from '@/config/user/api.js';
	import config from '@/config/config.js';
	export default {
		data() {
			return {
				show:false,
				loading:true,
				dataList:[],
				list: [],
				listTip: null,
				keyWord:'',
				typeCurrent:0,
				nav:[{
					name:'出售中',
					status: 1,
				},{
					name:'已下架',
					status: 0,
				},{
					name:'违规',
					status: 2,
				},{
					name:'云库存',
					status: 3,
				}],
				cateList:[],
				cateValue:'',
				cateId:'',
			}
		},
		components: {
		},
		onLoad(o) {
			this.getCate();
			this.$list.init(this);
		},
		
		onShow() {
			this.$refs.paging.reload();
		},
		computed: {
			...mapState({
			    userInfo: 'userInfo',
			})
		},
		
		onShareAppMessage() {
			
		},
		methods: {	
			
			async getList(pageNo,pageSize,onRefresh = false){
				const that = this;
				let paramData = {
					page_no:pageNo,
					page_size: 20,
					cate_id:that.cateId,
					goods_name:that.keyWord,
				};
				let res;
				if(that.typeCurrent == 3){
					paramData.goods_state = 1;
					res = await inventory(paramData);
				}else{
					paramData.goods_state = that.nav[that.typeCurrent].status,
					res = await goods_list(paramData);
				}
				console.log(res);
				if (res.code != 1) {
					if(!that.userInfo) return
					if(res.code == 51003) return
					this.$common.showTip(res.msg, 'none')
					return
				}; 
				let list = res.data.data || [];
				if (list.length) {
					let setdata = that.$list.normalData(list, that);
					setdata.list.forEach(el=>{
						el.goods_image = 'https://www.jiumeifu.cc'  + el.goods_image;
					})
					that.list = setdata.list;
					that.$refs.paging.complete(setdata.list);
				} else {
					that.$refs.paging.complete([]);
				};
			},	
			async onRefresh(){
			},
			async getCate(){
				const that = this;
				const res = await goods_category();
				if (res.code != 1) {
					if(res.code == 51003) return
					that.$common.showTip(res.msg, 'none')
					return
				};
				this.cateList = res.data;
			},
			// 跳转页面方法
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			confirm(e){
				const that = this;
				this.$refs.paging.reload();
			},
			selectValue(e){
				const that = this;
				that.cateId = e[0].value;
				that.cateValue = e[0].label;
				this.$refs.paging.reload();
			},
			tabChange(e){
				this.typeCurrent = e;
				this.$refs.paging.reload();
			},
			search(){
				this.$refs.paging.reload();
			},
			previewImage: function(e) {
				let current = e.target.dataset.src;
				let arr = e.target.dataset.arr;
				uni.previewImage({
					current: current,
					urls: arr
				})
			},
			...mapMutations(['setUserInfo','setAddressMsg','setNowHospital'])
		}
	}
</script>


<style scoped lang="scss">
	.bgf{
		padding: 1px 20rpx;
		background: #fff;
		margin-bottom: 10rpx;
	}
	.search-box{
		width: 670rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}
	.m-btn{
		height: 60rpx;
		padding: 0 20rpx;
		width: 100rpx;
		font-size: 28rpx;
		color:#fff;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
	.list{
		margin-top: 20rpx;
		.wrap{
			padding: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.img{
				width: 180rpx;
				height: 160rpx;
			}
			.font{
				padding-left: 20rpx;
				flex: 1;
				.tit{
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.p{
					color: #999;
					font-size: 26rpx;
					margin-bottom: 10rpx;
					text{
						margin-right: 30rpx;
					}
					.red{
						font-size: 34rpx;
						margin-left: 5rpx;
						font-weight: bold;
					}
				}
			}
			.bot{
				margin-top: 20rpx;
				border-top: 1px solid #eee;
				padding: 20rpx 0 0;
				text{
					margin-left: 10rpx;
				}
			}
		}
	}
	.com-bot-box{
		padding-bottom: 20rpx;
	}
</style>